import React from 'react';
import { componentClass, ComponentProps } from '../../../../common/Component';
import './index.less';

export function Ul(props:React.PropsWithChildren<ComponentProps>){
    return <ul className={componentClass(props, 'apps-markdown-list-ul contains-task-list')}>
        {props.children}
    </ul>
}

export function Ol(props:React.PropsWithChildren<ComponentProps>){
    return <ol className={componentClass(props, 'apps-markdown-list-ol contains-task-list')}>
        {props.children}
    </ol>
}

export function Li(props:React.PropsWithChildren<ComponentProps> & {checked?:boolean}){

    let notHasCheck = props.checked === undefined ;

    return <li className={componentClass(props, 'apps-markdown-list-li ' + (notHasCheck ? ' ' : 'task-list-item'))}>
        {notHasCheck? null : <input type="checkbox" className='task-list-item-checkbox' disabled checked={props.checked} />}
        {props.children}
    </li>
}